<template>
  <n-card>
    <template #cover>
      <img :src="host + '/api/' + spaceData.space_image">
    </template>
    <div class="card_avatar">
      <div>
        <div style="font-size: 15px;">{{ spaceData.username }}</div>
        <div style="height: 10px;"></div>
        <div style="font-size: 12px;color: gray;">创建{{ spaceData.create_day }}天</div>
      </div>
      <div v-if="avatar">
        <n-avatar
          round
          size="large"
          :src="(host + '/api/' + avatar as string)"
        />
      </div>
    </div>
    <div class="card_space">
      <div style="font-size: 22px;font-weight: 700;">
        {{ spaceData.space_name }}
      </div>
      <div class="">
        <n-ellipsis expand-trigger="click" line-clamp="2" :tooltip="false">
          {{ spaceData.space_description }}
        </n-ellipsis>
      </div>
    </div>
  </n-card>
  <n-button
  round
  ghost
  @click="sharespace"
  style="width: 100%;margin-top: 20px;"
  >
    分享空间
  </n-button>
  <template v-if="spaceData.phone != phone">
    <n-button
    round
    ghost
    @click="exitspace"
    style="color: #e88080;width: 100%;margin-top: 20px;"
    >
      退出空间
    </n-button>
  </template>
  <template v-else>
    <n-button round ghost style="width: 100%;margin: 20px 0;" @click="router.push('/spaceConfig/' + spaceData.space_id)">
      管理空间
    </n-button>
  </template>

  <n-modal v-model:show="showModal" transform-origin="center">
    <n-card
      style="min-width: 600px"
      title=""
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <div style="font-size: 20px;font-weight: 700;">
        已生成分享链接:
      </div>
      <div class="share-space-modal" :title="shareUrl">
        {{ shareUrl }}
      </div>
      <div class="share-button">
        <n-button @click="copyUrl">复制链接</n-button>
      </div>
    </n-card>
  </n-modal>
  
</template>

<script setup lang='ts'>
import {spaceDateType} from "../types"
import { exitSpace, ShareSpace } from "../api/space";
import {ref,onMounted,inject } from "vue"
import {RandomString} from "../util/randomString"
import { useRouter } from 'vue-router';
const router = useRouter()

const host = ref("")
const phone = ref("")
const showModal = ref(false)
const shareUrl = ref("")

const props = defineProps<{
  spaceData: spaceDateType,
  avatar: string | null
}>()

const sharespace = () => {
  let randomString = RandomString(20)
  const url = window.location.origin + '/#/shareSpace?space_id=' + props.spaceData.space_id + '&share_code=' + randomString
  shareUrl.value = url
  console.log(url)
  ShareSpace({
    user_id: Number(localStorage.getItem("user_id")),
    space_id: props.spaceData.space_id,
    share_code: randomString,
  })
  showModal.value = true
}

const copyUrl = () => {
  navigator.clipboard.writeText(shareUrl.value)
  window.$message.success("分享链接已复制到剪切板")
  showModal.value = false
}

const exitspace = async () => {
  const res = await exitSpace({
    phone: phone.value,
    space_id: props.spaceData.space_id
  })
  if(res.code!="200"){
    window.$message.warning(res.message)
  }else{
    router.push("/")
    // 异步刷新页面
    setTimeout(() => {
      router.go(0)
    }, 0);
    
  }
}

onMounted(() => {
  host.value = inject("host") as string
  phone.value = localStorage.getItem("token") as string
})
</script>

<style lang='scss' scoped>
  .n-card {
    max-width: 300px;
    .card_avatar{
      padding: 15px 0 0 0;
      display: flex;
      justify-content: space-between;
      // margin-top: -50px;
    }
    .card_space{
      padding: 10px 0 0 0;
    }
  }
  .share-space-modal{
    margin-top: 20px;
    // 不换行，超出隐藏
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    // 宽度
    width: 100%;
    // 高度
    height: 100%;
    // 超出部分隐藏
    overflow: hidden;
    // 超出部分显示省略号
    text-overflow: ellipsis;
    // 超出部分显示省略号
    display: -webkit-box;
  }
  .share-button{
    margin-top: 20px;
    width: 100%;
    text-align: center;
    .n-button{
      width: 100px;
    }
  }
</style>